<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机通讯录</title>
</head>
<body>
<fieldset style="float:left;border:8px solid;border-color: black; width:350px;text-align:center;">
<style type="text/css">
    .li1{background-color: #999999;letter-spacing: 1px;width: 350px;}
</style>
<br>
<dl class="li1"><center>手机通讯记录管理器</center></dl><br>
<script>
    // 载入所有存储在localStorage的通讯录信息
    loadAllInfo();
    //保存一条通讯记录数据，同时显示在div中
    function $(id){return document.getElementById(id);}
    function saveInfo(){
        var name1=$("username").value;//取姓名
        var phone1=$("userphone").value;	//取电话
        if (name1!="" && phone1!="") {//不为空处理
            localStorage.setItem(name1,phone1);
            loadAllInfo();
            alert("添加成功");
        }else{//姓名或电话为空，告警并获得焦点
            alert("请输入姓名和电话！");
            $("username").focus();
        }
    }
    //以姓名查找通讯录信息
    function findForName(){
        var searchname = $("search_name").value;
        var searchphone = localStorage.getItem(searchname); //取电话
        $("userphone1").value=searchphone; //填充电话
    }
    //从localStorage中取出所有通讯录中信息，并展现到界面上
    function loadAllInfo(){
// localStorage.clear();
        var result = "";
        if(localStorage.length>0){
            result += "姓名&nbsp;&nbsp;&nbsp;&nbsp;电话</br><hr>";
            for(var i=0;i<localStorage.length;i++){
                var name= localStorage.key(i);
                var phone = localStorage.getItem(name);
                result += name+"   ---   "+phone+"</br>";
            }
            $("displayallinfo").innerHTML = result;
        }else{
            $("displayallinfo").innerHTML = "数据为空……";
        }
    }
    //删除某一条通讯信息
    function deleteName(){
        localStorage.removeItem($("search_name").value); //取电话
        $("search_name").value=""; //填充电话
        loadAllInfo();
    }
</script>
<fieldset style="float:left;width:300px;text-align:center;">
    <legend align="center">简易手机通讯录</legend><label for=>姓名：</label>
    <input type="text" id="username" name="username" required/><br/>
    <label for=>电话：</label>
    <input type="text" id="userphone" name="userphone" required/><br/>
    <br><input type="button" onclick="saveInfo()" value="添加"/>
    <input type="button" onclick="findForName()" value="查寻"/>
    <input type="button" onclick="deleteName()" value="删除"/>
    <input type="reset">
    <div id="displayallinfo" name="displayallinfo"></div>
    <label for=>输入姓名：</label>
    <input type="text" id="search_name" name="search_name" required/><br>
    <label for=>电话：</label>
    <input type="text" name="" id="userphone1" readonly>

</fieldset>

</table>
    <fieldset style="float:left;font-size:13px;width:300px;height:40px;text-align:center;background-color: #999999">
        <dl>前端工作室设计<br>版权所有@，2017-2020</dl>
    </fieldset>
</fieldset>
            </body>
</html>